<!-- <template>
    <div class="warning-record">
     
     <div class="top">
      <div class="level">
        <label for="warning-level">预警级别:</label>  
        <select v-model="selectedLevel" id="warning-level">  
          <option v-for="level in warningLevels" :value="level.value" :key="level.value">  
            {{ level.label }}  
          </option>  
        </select>  
      </div>
      <div class="type">  
        <label for="warning-type">预警类型:</label>  
        <select v-model="selectedType" id="warning-type">  
          <option  v-for="item in warningLevels" :value="item.value" :key="item.value">
            {{ item.label }}  
          </option>  
        </select>  
      </div>
      <div>  
        <label for="search-input">搜索:</label>  
        <input type="text" v-model="searchQuery" id="search-input" placeholder="输入搜索内容">  
      </div>
    </div>   

      <div class="record-details"></div>
      <table class="record-details">
        <thead>
          <tr>
            <th>序号</th>
            <th>时间</th>
            <th>设备名称</th>
            <th>预警类型</th>
            <th>预警级别</th>
            <th>预警描述</th>
            <th>处理状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(alert, index) in alerts" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ alert.event }}</td>
            <td>{{ alert.deviceName }}</td>
            <td>{{ alert.alertType }}</td>
            <td>{{ alert.alertLevel }}</td>
            <td>{{ alert.alertDescription }}</td>
            <td>{{ alert.handlingStatus }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
   
  <script>
  export default {
    data() {
      return {
        alerts: [
          // 预警记录的数据
          {
            id:1,
            time: '2024-03-21',
            deviceName: '传感器A001',
            alertType: '通信故障',
            alertLevel: '高',
            alertDescription: '传感器数据无法上传	',
            handlingStatus: '已修复'
          },
          {
            id:2,
            time: '2024-03-23',
            deviceName: '智能门锁B002',
            alertType: '非法入侵',
            alertLevel: '中',
            alertDescription: '异常开锁尝试	',
            handlingStatus: '已处理'
          },
          {
            id:3,
            time: '2024-03-25',
            deviceName: '摄像头C003',
            alertType: '视频异常',
            alertLevel: '高',
            alertDescription: '视频流中断',
            handlingStatus: '已处理'
          },
          {
            id:4,
            time: '2024-03-26',
            deviceName: '控制器D004',
            alertType: '软件漏洞',
            alertLevel: '高',
            alertDescription: '检测到潜在安全风险',
            handlingStatus: '已升级牢固'
          },
          {
            id:5,
            time: '2024-03-27',
            deviceName: '路由器E005',
            alertType: '流量异常 ',
            alertLevel: '中',
            alertDescription: '超出正常流量阈值',
            handlingStatus: '监控中'
          },
          {
            id:6,
            time: '2024-03-28',
            deviceName: '网关F006',
            alertType: '电源故障',
            alertLevel: '高',
            alertDescription: '设备无法供电 ',
            handlingStatus: '已更换电源'
          },
          {
            id:7,
            time: '2024-03-29',
            deviceName: '终端G007 ',
            alertType: '数据泄露 ',
            alertLevel: '高',
            alertDescription: '检测到敏感数据外泄 ',
            handlingStatus: '已紧急处理'
          },
          {
            id:8,
            time: '2024-03-30',
            deviceName: '物联网卡H008',
            alertType: '信号异常',
            alertLevel: '低',
            alertDescription: '信号强度不稳定 ',
            handlingStatus: '调整中'
          },
          {
            id:9,
            time: '2024-03-31',
            deviceName: '云服务I009',
            alertType: '访问异常',
            alertLevel: '中',
            alertDescription: '异常IP地址尝试访问 ',
            handlingStatus: '已封禁IP'
          },
          {
            id:10,
            time: '2024-03-31',
            deviceName: '物联网平台J010 ',
            alertType: '系统故障',
            alertLevel: '中',
            alertDescription: '平台服务中断  ',
            handlingStatus: '正在抢修'
          },
         
        ],
        searchQuery: '',  
      selectedLevel: '',  
      selectedType: '',  
        warningLevels: [  
        { value: 'high', label: '高' },  
        { value: 'medium', label: '中' },  
        { value: 'low', label: '低' }  
      ], 
      warningTypes: [  
        { value: 'typeA', label: '通信故障' },  
        { value: 'typeB', label: '非法入侵' },  
        { value: 'typeC', label: '视频异常' } ,
        { value: 'typeD', label: '软件漏洞' },  
        { value: 'typeE', label: '电源故障' },  
        { value: 'typeF', label: '流量异常' } ,
        { value: 'typeG', label: '数据泄露' },  
        { value: 'typeH', label: '信号异常' },  
        { value: 'typeK', label: '视频异常' } , 
        { value: 'typeL', label: '访问异常' },  
        { value: 'typeM', label: '系统故障' },   
      ],  
      };
    },
    methods: {  
    searchRecords() {  
      // 过滤条件  
      const { searchQuery, selectedLevel, selectedType } = this;  
        
      // 根据条件过滤预警记录  
      const filteredRecords = this.warningRecords.filter(record => {  
        // 搜索查询为空，则不根据搜索查询过滤  
        if (searchQuery === '') {  
          // 仅根据预警级别和预警类型过滤  
          return record.level === selectedLevel && record.type === selectedType;  
        } else {  
          // 根据搜索查询、预警级别和预警类型过滤  
          return (  
            record.level === selectedLevel &&  
            record.type === selectedType &&  
            record.description.toLowerCase().includes(searchQuery.toLowerCase())  
          );  
        }  
      });  
        
      // 显示过滤后的记录  
      this.updateUIWithRecords(filteredRecords);  
    },  
    updateUIWithRecords(records) {  
      this.tableDataSource = records;  
    }  
  }  
  };
  </script>
  <style scoped> 
  .top,.level,.type{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .warning-record {  
    margin-bottom: 10px;  
    padding: 10px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
  }
  .warning-records-table {  
  width: 100%;  
  border-collapse: collapse; /* 合并相邻的边框 */  
  margin-top: 20px; /* 与搜索表单之间的间距 */  
}  
  
.warning-records-table th,  
.warning-records-table td {  
  padding: 8px; /* 单元格内边距 */  
  text-align: left; /* 文本左对齐 */  
  border-bottom: 1px solid #ddd; /* 底部边框 */  
}  
  
.warning-records-table th {  
  background-color: #f2f2f2; /* 表头背景色 */  
  font-weight: bold; /* 表头字体加粗 */  
}  
  
/* 可选：为奇数行添加背景色以区分行 */  
.warning-records-table tr:nth-child(odd) {  
  background-color: #f9f9f9;  
}  
  
/* 响应式表格样式，当屏幕较小时可以水平滚动 */  
@media (max-width: 600px) {  
  .warning-records-table {  
    border: 1px solid #ccc; /* 外部边框 */  
  }  
    
  .warning-records-table thead {  
    display: none; /* 在小屏幕上隐藏表头 */  
  }  
    
  .warning-records-table tr {  
    display: block; /* 将行显示为块级元素以进行堆叠 */  
    margin-bottom: 10px; /* 行之间的间距 */  
  }  
    
  .warning-records-table td {  
    display: block; /* 将单元格显示为块级元素 */  
    text-align: right; /* 文本右对齐，以适应堆叠显示 */  
  }  
    
  .warning-records-table td::before {  
    content: attr(data-label); /* 使用自定义的data-label属性作为列标题 */  
    float: left; /* 将列标题浮动到左侧 */  
    text-transform: uppercase; /* 列标题大写 */  
    font-weight: bold; /* 列标题加粗 */  
  }  
}
  </style> -->

<template>
    <div class="warning-record">
      <table class="record-details">
        <thead>
          <tr>
            <th>序号</th>
            <th>策略名称</th>
            <th>策略描述</th>
            <th>适用对象</th>
            <th>实施时间</th>
            <th>负责人</th>
            <th>审核状态</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(record, index) in warningRecords" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ record.name }}</td>  
          <td>{{ record.description }}</td>  
          <td>{{ record.applicableObject }}</td>  
          <td>{{ record.implementationTime }}</td>  
          <td>{{ record.responsiblePerson }}</td>  
          <td>{{ record.auditStatus }}</td>  
          <td>{{ record.remarks }}</td>  
          </tr>
        </tbody>
      </table>
      <Modaladd v-if="isEditing" @submit="updateRecord" @cancel="cancelEdit">  
      <!-- 这里的表单应该绑定到editForm数据上 -->  
      <form>  
        <input type="text" v-model="editForm.name" placeholder="策略名称" />  
        <input type="text" v-model="editForm.description" placeholder="策略描述" /> 
        <input type="text" v-model="editForm.applicableObject" placeholder="适用对象" />
        <input type="text" v-model="editForm.implementationTime" placeholder="实施时间" />
        <input type="text" v-model="editForm.responsiblePerson" placeholder="负责人" />
        <input type="text" v-model="editForm.auditStatus" placeholder="审核状态" /> 
        <input type="text" v-model="editForm.remarks" placeholder="备注" /> 
        <button   @click="updateRecord" type="submit" >保存</button>  
        <button @click="cancelEdit">取消</button>  
      </form>  
    </Modaladd>  
    <Modaldele v-if="showConfirmdele" @confirm="deleteRecordConfirmed" @cancel="cancelDelete">  
      <p>你确定要删除这条记录吗？</p>  
      <button type="button" @click="deleteRecordConfirmed">确定</button>  
      <button type="button" @click="cancelDelete">取消</button>  
    </Modaldele>  
    </div>
  </template>
   
  <script>
  import Modaladd from './Modaladd.vue'; // 新增
  import Modaldele from './Modaldele.vue'; // 删除
  export default {
    components: {  
        Modaladd,
        Modaldele

  },
    data() {
      return {
        warningRecords: [
          // 安全策略管理的数据
          { 
          id:1, 
          name: '访问控制策略',  
          description: '限制对物联网设备的访问权限',  
          applicableObject: '所有物联网设备',  
          implementationTime: '2024年3月1日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '严格实施访问控制'  
         }, 
         { 
          id:2, 
          name: '数据加密策略',  
          description: '对传输和存储的敏感数据进行加密处理，防止数据泄露',  
          applicableObject: '敏感数据',  
          implementationTime: '2024年3月5日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '采用AES加密算法'  
         }, 
         { 
          id:3, 
          name: '漏洞管理策略',  
          description: '定期对物联网系统和设备进行漏洞扫描和修复',  
          applicableObject: '物联网系统和设备',  
          implementationTime: '2024年3月10日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '每月进行一次漏洞扫描'  
         }, 
         { 
          id:4, 
          name: '安全审计策略',  
          description: '对物联网系统的安全事件和操作进行审计，确保合规性',  
          applicableObject: '安全事件和操作日志',  
          implementationTime: '2024年3月15日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '生成安全日志'  
         },
         { 
          id:5, 
          name: '入侵防御策略',  
          description: '部署入侵检测和防御系统，实时监测和应对潜在的网络攻击',  
          applicableObject: '物联网网络',  
          implementationTime: '2024年3月20日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '启用实时入侵检测功能'  
         }, 
         { 
          id:6, 
          name: '备份恢复策略',  
          description: '定期备份物联网系统和数据，确保在故障或攻击发生时能够迅速恢复',  
          applicableObject: '物联网系统和数据',  
          implementationTime: '2024年3月25日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '每周进行一次数据备份'  
         },  
         { 
          id:7, 
          name: '身份验证策略',  
          description: '对接入物联网网络的用户和设备进行身份验证',  
          applicableObject: '用户和设备',  
          implementationTime: '2024年3月28日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '采用多因素身份验证机制'  
         },  
         { 
          id:8, 
          name: '身份验证策略',  
          description: '对接入物联网网络的用户和设备进行身份验证',  
          applicableObject: '用户和设备',  
          implementationTime: '2024年3月29日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '采用多因素身份验证机制'  
         },   
         { 
          id:9, 
          name: '软件更新策略',  
          description: '及时更新物联网设备和系统的软件版本 ',  
          applicableObject: '物联网设备和系统',  
          implementationTime: '2024年3月30日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '自动推送并安装安全更新'  
         }, 
         { 
          id:10, 
          name: '应急响应策略',  
          description: '制定物联网系统安全事件的应急响应预案',  
          applicableObject: '安全事件',  
          implementationTime: '2024年3月31日',  
          responsiblePerson: 'admin',  
          auditStatus: '已审核',  
          remarks: '定期进行应急演练'  
         },   
          
         
        ],
        warningRecords: [], // 原始数据  
      filteredRecords: [], // 过滤后的数据  
      isEditing: false, // 控制Modal是否显示  
      editForm: { // 编辑表单的数据  
        id: null, 
        name: '', 
        description: '',
        applicableObject:'',
        implementationTime:'', 
        responsiblePerson:'',
        auditStatus:'',
        remarks:''
        
      },  
      editIndex: null,
      showConfirmdele: false, // 控制确认删除的Modal是否显示  
      deleteIndex: null // 
          
     
      };
    },
    methods: {
        editRecord(record, index) {  
      this.isEditing = true; // 显示Modal  
      this.editIndex = index; // 记录当前编辑的记录的索引  
      this.editForm = { ...record }; // 将当前记录的数据复制到editForm中  
    }, 
    updateRecord(newRecord) {  
      // 假设newRecord是表单提交后得到的新记录数据  
      const index = this.editIndex;  
      // 更新原始数据  
      this.$set(this.warningRecords, index, { ...this.warningRecords[index], ...newRecord });  
      // 关闭Modal  
      this.isEditing = false;  
      // 重置editForm和editIndex  
      this.editForm = { 
        id: null, 
        name: '', 
        description: '',
        applicableObject:'',
        implementationTime:'', 
        responsiblePerson:'',
        auditStatus:'',
        remarks:''
      };  
      this.editIndex = null;  
      // 可能还需要更新filteredRecords，取决于你的过滤逻辑  
    },
    // 取消  
    cancelEdit() {  
      // 取消编辑时关闭Modal并重置数据  
      this.isEditing = false;  
      this.editForm = {
        id: null, 
        name: '', 
        description: '',
        applicableObject:'',
        implementationTime:'', 
        responsiblePerson:'',
        auditStatus:'',
        remarks:'',
       };  
      this.editIndex = null;  
    },
    confirmDelete(index) {  
      // 显示确认删除的Modal  
      this.showConfirm = true;  
      // 记录要删除的记录的索引  
      this.deleteIndex = index;  
    },  
    deleteRecordConfirmed() {  
      // 用户确认删除，执行删除操作  
      const index = this.deleteIndex;  
      if (index !== null && index >= 0 && index < this.warningRecords.length) {  
        this.warningRecords.splice(index, 1);  
        // 关闭确认Modal  
        this.showConfirm = false;  
        // 重置deleteIndex  
        this.deleteIndex = null;  
       
      } else {  
        // 索引无效，可以添加错误处理逻辑  
        console.error('Invalid index for deletion.');  
      }  
    },  
    cancelDelete() {  
      // 用户取消删除，关闭确认Modal并重置数据  
      this.showConfirm = false;  
      this.deleteIndex = null;  
    },  

    searchRecords() {  
      // 过滤条件  
      const { searchQuery, selectedLevel, selectedType } = this;  
        
      // 根据条件过滤预警记录  
      const filteredRecords = this.warningRecords.filter(record => {  
        // 搜索查询为空，则不根据搜索查询过滤  
        if (searchQuery === '') {  
          // 仅根据预警级别和预警类型过滤  
          return record.level === selectedLevel && record.type === selectedType;  
        } else {  
          // 根据搜索查询、预警级别和预警类型过滤  
          return (  
            record.level === selectedLevel &&  
            record.type === selectedType &&  
            record.description.toLowerCase().includes(searchQuery.toLowerCase())  
          );  
        }  
      });  
        
      // 显示过滤后的记录  
      this.updateUIWithRecords(filteredRecords);  
    },  
    updateUIWithRecords(records) {  
      this.tableDataSource = records;  
    }  
    
  }  
  };
  </script>
  <style scoped> 
  .top,.level,.type{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .warning-record {  
    margin-bottom: 10px;  
    padding: 10px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
  }
  .warning-records-table {  
  width: 100%;  
  border-collapse: collapse; /* 合并相邻的边框 */  
  margin-top: 20px; /* 与搜索表单之间的间距 */  
}  
  
.warning-records-table th,  
.warning-records-table td {  
  padding: 8px; /* 单元格内边距 */  
  text-align: left; /* 文本左对齐 */  
  border-bottom: 1px solid #ddd; /* 底部边框 */  
}  
  
.warning-records-table th {  
  background-color: #f2f2f2; /* 表头背景色 */  
  font-weight: bold; /* 表头字体加粗 */  
}  
  
/* 可选：为奇数行添加背景色以区分行 */  
.warning-records-table tr:nth-child(odd) {  
  background-color: #f9f9f9;  
}  
  
/* 响应式表格样式，当屏幕较小时可以水平滚动 */  
@media (max-width: 600px) {  
  .warning-records-table {  
    border: 1px solid #ccc; /* 外部边框 */  
  }  
    
  .warning-records-table thead {  
    display: none; /* 在小屏幕上隐藏表头 */  
  }  
    
  .warning-records-table tr {  
    display: block; /* 将行显示为块级元素以进行堆叠 */  
    margin-bottom: 10px; /* 行之间的间距 */  
  }  
    
  .warning-records-table td {  
    display: block; /* 将单元格显示为块级元素 */  
    text-align: right; /* 文本右对齐，以适应堆叠显示 */  
  }  
    
  .warning-records-table td::before {  
    content: attr(data-label); /* 使用自定义的data-label属性作为列标题 */  
    float: left; /* 将列标题浮动到左侧 */  
    text-transform: uppercase; /* 列标题大写 */  
    font-weight: bold; /* 列标题加粗 */  
  }  
}
  </style>